2.1 Tailwind CSS

Tailwind CSS es un framework CSS de utilidad que proporciona una amplia gama de clases predefinidas para construir interfaces de usuario personalizadas de manera eficiente. A continuación, encontrarás una documentación detallada de las clases más utilizadas en Tailwind CSS, junto con sus equivalentes en líneas de CSS, organizadas por categorías para facilitar su comprensión y uso.

Índice

1. Colores
2. Tipografía
3. Espaciado
4. Flexbox y Grid
5. Layout
6. Tamaño
7. Bordes y Esquinas Redondeadas
8. Efectos
9. Estado de Comportamiento (Pseudo-clases)
10. Otros Utilitarios

1. Colores

Tailwind CSS ofrece una paleta extensa de colores que se pueden aplicar a fondo, texto, bordes y sombras.

Clases de Color de Fondo (bg-)

• Sintaxis: bg-{color}-{shade}

• Ejemplo:

  <div class="bg-blue-500"></div>
  

• Descripción: Aplica un color de fondo específico al elemento.

• Equivalente CSS:

  .bg-blue-500 {
    background-color: #3B82F6;
  }
  

Clases de Color de Texto (text-)

• Sintaxis: text-{color}-{shade}

• Ejemplo:

  <p class="text-gray-700">Texto en gris oscuro</p>
  

• Descripción: Cambia el color del texto.

• Equivalente CSS:

  .text-gray-700 {
    color: #374151;
  }
  

Clases de Color de Borde (border-)

• Sintaxis: border-{color}-{shade}

• Ejemplo:

  <div class="border border-red-500"></div>
  

• Descripción: Define el color del borde del elemento.

• Equivalente CSS:

  .border {
    border-width: 1px;
  }
  .border-red-500 {
    border-color: #EF4444;
  }
  

Ejemplos de Colores Comunes

• Azul: blue-50 a blue-900
• Rojo: red-50 a red-900
• Verde: green-50 a green-900
• Gris: gray-50 a gray-900

2. Tipografía

Las clases tipográficas controlan la apariencia del texto, incluyendo tamaño, peso, alineación y estilo.

Tamaño de Fuente (text-)

• Sintaxis: text-{size}

• Ejemplos:

  <p class="text-sm">Texto pequeño</p>
  <p class="text-base">Texto base</p>
  <p class="text-lg">Texto grande</p>
  <p class="text-xl">Texto extra grande</p>
  

• Descripción: Ajusta el tamaño de la fuente.

• Equivalente CSS:

  .text-sm {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
  }
  .text-base {
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
  }
  .text-lg {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
  }
  .text-xl {
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
  }
  

Peso de Fuente (font-)

• Sintaxis: font-{weight}

• Ejemplos:

  <p class="font-thin">Fuente delgada</p>
  <p class="font-normal">Fuente normal</p>
  <p class="font-bold">Fuente negrita</p>
  

• Descripción: Establece el grosor de la fuente.

• Equivalente CSS:

  .font-thin {
    font-weight: 100;
  }
  .font-normal {
    font-weight: 400;
  }
  .font-bold {
    font-weight: 700;
  }
  

Alineación de Texto (text-)

• Sintaxis: text-{alignment}

• Opciones: left, center, right, justify

• Ejemplo:

  <p class="text-center">Texto centrado</p>
  

• Equivalente CSS:

  .text-center {
    text-align: center;
  }
  

Estilo y Decoración

• Cursiva:

  <p class="italic">Texto en cursiva</p>
  

  Equivalente CSS:

  .italic {
    font-style: italic;
  }
  

• No Cursiva:

  <p class="not-italic">Texto normal</p>
  

  Equivalente CSS:

  .not-italic {
    font-style: normal;
  }
  

• Subrayado:

  <p class="underline">Texto subrayado</p>
  

  Equivalente CSS:

  .underline {
    text-decoration: underline;
  }
  

• Tachado:

  <p class="line-through">Texto tachado</p>
  

  Equivalente CSS:

  .line-through {
    text-decoration: line-through;
  }
  

3. Espaciado

Las clases de espaciado controlan el margen y padding de los elementos.

Padding (p-)

• Sintaxis: p{lado}-{tamaño}

• Lados:

  • p (todos)
  • pt (arriba)
  • pr (derecha)
  • pb (abajo)
  • pl (izquierda)
  • px (eje X: izquierda y derecha)
  • py (eje Y: arriba y abajo)

• Ejemplos:

  <div class="p-4">Padding en todos los lados de 1rem</div>
  <div class="pt-2">Padding superior de 0.5rem</div>
  <div class="px-6">Padding izquierdo y derecho de 1.5rem</div>
  

• Equivalente CSS:

  .p-4 {
    padding: 1rem;
  }
  .pt-2 {
    padding-top: 0.5rem;
  }
  .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  

Margin (m-)

• Sintaxis: m{lado}-{tamaño}

• Ejemplos:

  <div class="m-4">Margin en todos los lados de 1rem</div>
  <div class="mb-2">Margin inferior de 0.5rem</div>
  <div class="mx-auto">Margen automático en eje X (centra el elemento)</div>
  

• Equivalente CSS:

  .m-4 {
    margin: 1rem;
  }
  .mb-2 {
    margin-bottom: 0.5rem;
  }
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  

Tamaños Comunes

• 0 : 0rem
• 1 : 0.25rem (4px)
• 2 : 0.5rem (8px)
• 3 : 0.75rem (12px)
• 4 : 1rem (16px)
• 5 : 1.25rem (20px)
• 6 : 1.5rem (24px)
• 8 : 2rem (32px)
• 10 : 2.5rem (40px)

4. Flexbox y Grid

Tailwind facilita el uso de Flexbox y Grid para crear layouts complejos.

Display Flex (flex)

• Activar Flexbox:

  <div class="flex">
    <!-- Elementos hijos -->
  </div>
  

• Equivalente CSS:

  .flex {
    display: flex;
  }
  

Dirección del Flex (flex-row, flex-col)

• Fila (Horizontal):

  <div class="flex flex-row">
    <!-- Elementos en fila -->
  </div>
  

  Equivalente CSS:

  .flex-row {
    flex-direction: row;
  }
  

• Columna (Vertical):

  <div class="flex flex-col">
    <!-- Elementos en columna -->
  </div>
  

  Equivalente CSS:

  .flex-col {
    flex-direction: column;
  }
  

Alineación y Justificación

• Justificar Contenido (Eje Principal):

  • justify-start
  • justify-center
  • justify-end
  • justify-between
  • justify-around

• Ejemplo:

  <div class="flex justify-center">
    <!-- Elementos centrados horizontalmente -->
  </div>
  

• Equivalente CSS:

  .justify-center {
    justify-content: center;
  }
  

• Alinear Items (Eje Cruzado):

  <div class="flex items-center">
    <!-- Elementos alineados verticalmente al centro -->
  </div>
  

• Equivalente CSS:

  .items-center {
    align-items: center;
  }
  

Grid Layout

• Activar Grid:

  <div class="grid">
    <!-- Elementos hijos -->
  </div>
  

• Equivalente CSS:

  .grid {
    display: grid;
  }
  

• Definir Columnas:

  • Sintaxis: grid-cols-{número}

  <div class="grid grid-cols-3">
    <!-- Crea una cuadrícula con 3 columnas -->
  </div>
  

• Equivalente CSS:

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  

• Espaciado Entre Filas y Columnas:

  <div class="grid grid-cols-3 gap-4">
    <!-- Espacio de 1rem entre filas y columnas -->
  </div>
  

• Equivalente CSS:

  .gap-4 {
    gap: 1rem;
  }
  

5. Layout

Controla el comportamiento y posición de los elementos en la página.

Display

• Bloque (block):

  <div class="block"></div>
  

• Equivalente CSS:

  .block {
    display: block;
  }
  

• Inline Block (inline-block):

  <span class="inline-block"></span>
  

• Equivalente CSS:

  .inline-block {
    display: inline-block;
  }
  

• Ocultar Elementos (hidden):

  <div class="hidden"></div>
  

• Equivalente CSS:

  .hidden {
    display: none;
  }
  

Posición

• Clases:

  • static (por defecto)
  • relative
  • absolute
  • fixed
  • sticky

• Ejemplo:

  <div class="relative">
    <div class="absolute top-0 left-0">
      <!-- Elemento posicionado absolutamente -->
    </div>
  </div>
  

• Equivalente CSS:

  .relative {
    position: relative;
  }
  .absolute {
    position: absolute;
  }
  .top-0 {
    top: 0px;
  }
  .left-0 {
    left: 0px;
  }
  

Z-Index

• Sintaxis: z-{número}

• Ejemplo:

  <div class="z-10"></div>
  

• Equivalente CSS:

  .z-10 {
    z-index: 10;
  }
  

6. Tamaño

Controla el ancho y alto de los elementos.

Ancho (w-)

• Clases Comunes:

  • w-0 hasta w-full
  • Porcentajes: w-1/2, w-1/3, w-2/3, w-1/4, etc.

• Ejemplos:

  <div class="w-full">Ancho completo del contenedor padre</div>
  <div class="w-1/2">Ancho del 50%</div>
  <div class="w-64">Ancho fijo de 16rem (256px)</div>
  

• Equivalente CSS:

  .w-full {
    width: 100%;
  }
  .w-1\/2 {
    width: 50%;
  }
  .w-64 {
    width: 16rem; /* 256px */
  }
  

Alto (h-)

• Clases Comunes:

  • h-0 hasta h-full

• Ejemplos:

  <div class="h-screen">Alto igual a la altura de la ventana</div>
  <div class="h-32">Alto fijo de 8rem (128px)</div>
  

• Equivalente CSS:

  .h-screen {
    height: 100vh;
  }
  .h-32 {
    height: 8rem; /* 128px */
  }
  

Tamaño Mínimo y Máximo

• Mínimo Ancho/Alto:

  .min-w-0 {
    min-width: 0px;
  }
  .min-w-full {
    min-width: 100%;
  }
  .min-h-0 {
    min-height: 0px;
  }
  .min-h-full {
    min-height: 100%;
  }
  

• Máximo Ancho/Alto:

  .max-w-0 {
    max-width: 0px;
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-screen-md {
    max-width: 768px;
  }
  .max-h-0 {
    max-height: 0px;
  }
  .max-h-full {
    max-height: 100%;
  }
  

7. Bordes y Esquinas Redondeadas

Bordes

• Ancho del Borde:

  • Sintaxis: border-{lado}-{tamaño}
  • Lados: sin especificar (todos), t (arriba), r (derecha), b (abajo), l (izquierda)
  • Tamaños: 0, 2, 4, 8

• Ejemplo:

  <div class="border-2">Borde de 2px en todos los lados</div>
  <div class="border-t-4">Borde superior de 4px</div>
  

• Equivalente CSS:

  .border-2 {
    border-width: 2px;
  }
  .border-t-4 {
    border-top-width: 4px;
  }
  

Esquinas Redondeadas (rounded-)

• Sintaxis: rounded{lado}-{tamaño}

• Lados:

  • sin especificar (todas)
  • t (arriba)
  • r (derecha)
  • b (abajo)
  • l (izquierda)
  • tl, tr, bl, br (esquinas)

• Tamaños:

  • sm (pequeño)
  • sin especificar (normal)
  • md
  • lg
  • xl
  • 2xl
  • 3xl
  • full (máximo redondeo)

• Ejemplo:

  <div class="rounded-lg">Esquinas redondeadas grandes</div>
  <div class="rounded-full">Elemento circular (si es cuadrado)</div>
  <div class="rounded-t-md">Esquinas superiores medianas redondeadas</div>
  

• Equivalente CSS:

  .rounded-lg {
    border-radius: 0.5rem;
  }
  .rounded-full {
    border-radius: 9999px;
  }
  .rounded-t-md {
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
  }
  

8. Efectos

Sombras (shadow-)

• Clases:

  • shadow-sm
  • shadow (por defecto)
  • shadow-md
  • shadow-lg
  • shadow-xl
  • shadow-2xl
  • shadow-inner
  • shadow-none

• Ejemplo:

  <div class="shadow-lg">Div con sombra grande</div>
  

• Equivalente CSS:

  .shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
  

Opacidad (opacity-)

• Sintaxis: opacity-{valor}

• Valores: 0, 25, 50, 75, 100

• Ejemplo:

  <div class="opacity-50">Div con 50% de opacidad</div>
  

• Equivalente CSS:

  .opacity-50 {
    opacity: 0.5;
  }
  

Transiciones y Transformaciones

• Transición (transition):

  <button class="transition duration-300 ease-in-out hover:bg-blue-500">
    Botón con transición
  </button>
  

• Equivalente CSS:

  .transition {
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-duration: 150ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  .duration-300 {
    transition-duration: 300ms;
  }
  .ease-in-out {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  .hover\:bg-blue-500:hover {
    background-color: #3B82F6;
  }
  

• Transformaciones:

  • Rotación:

    <div class="transform rotate-45">Elemento rotado 45 grados</div>
    

  • Equivalente CSS:

    .transform {
      transform: rotate(45deg);
    }
    .rotate-45 {
      --tw-rotate: 45deg;
      transform: rotate(var(--tw-rotate));
    }
    

  • Escala:

    <div class="transform scale-125">Elemento escalado al 125%</div>
    

  • Equivalente CSS:

    .scale-125 {
      --tw-scale-x: 1.25;
      --tw-scale-y: 1.25;
      transform: scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    }
    

9. Estado de Comportamiento (Pseudo-clases)

Las clases que permiten cambiar el estilo en respuesta a interacciones del usuario.

Hover

• Sintaxis: hover:{clase}

• Ejemplo:

  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Botón con efecto hover
  </button>
  

• Equivalente CSS:

  .bg-blue-500 {
    background-color: #3B82F6;
  }
  .hover\:bg-blue-700:hover {
    background-color: #1D4ED8;
  }
  

Focus

• Sintaxis: focus:{clase}

• Ejemplo:

  <input class="border border-gray-300 focus:border-blue-500" type="text">
  

• Equivalente CSS:

  .border {
    border-width: 1px;
  }
  .border-gray-300 {
    border-color: #D1D5DB;
  }
  .focus\:border-blue-500:focus {
    border-color: #3B82F6;
  }
  

Active

• Sintaxis: active:{clase}

• Ejemplo:

  <button class="bg-blue-500 active:bg-blue-700">Botón activo</button>
  

• Equivalente CSS:

  .active\:bg-blue-700:active {
    background-color: #1D4ED8;
  }
  

Disabled

• Sintaxis: disabled:{clase}

• Ejemplo:

  <button class="bg-blue-500 disabled:bg-gray-500" disabled>Botón deshabilitado</button>
  

• Equivalente CSS:

  .disabled\:bg-gray-500:disabled {
    background-color: #6B7280;
  }
  

10. Otros Utilitarios

Overflow

• Clases:

  • overflow-auto
  • overflow-hidden
  • overflow-visible
  • overflow-scroll

• Ejemplo:

  <div class="overflow-auto h-32">
    <!-- Contenido que puede hacer scroll si excede el alto de 8rem -->
  </div>
  

• Equivalente CSS:

  .overflow-auto {
    overflow: auto;
  }
  .h-32 {
    height: 8rem; /* 128px */
  }
  

Cursor

• Clases:

  • cursor-pointer
  • cursor-default
  • cursor-move
  • cursor-not-allowed

• Ejemplo:

  <button class="cursor-pointer">Botón con cursor de puntero</button>
  

• Equivalente CSS:

  .cursor-pointer {
    cursor: pointer;
  }
  

Listas

• Tipo de Lista:

  • list-none
  • list-disc
  • list-decimal

• Posición de Marcadores:

  • list-inside
  • list-outside

• Ejemplo:

  <ul class="list-disc list-inside">
    <li>Elemento de lista</li>
    <li>Otro elemento</li>
  </ul>
  

• Equivalente CSS:

  .list-disc {
    list-style-type: disc;
  }
  .list-inside {
    list-style-position: inside;
  }
  

Fondo

• Imagen de Fondo:

  • bg-none
  • bg-gradient-to-{direction} (por ejemplo, bg-gradient-to-r)

• Posición y Tamaño:

  • bg-center
  • bg-cover
  • bg-contain

• Ejemplo:

  <div class="bg-cover bg-center" style="background-image: url('imagen.jpg');">
    <!-- Contenido -->
  </div>
  

• Equivalente CSS:

  .bg-cover {
    background-size: cover;
  }
  .bg-center {
    background-position: center;
  }
  

Alineación Vertical

• Clases:

  • align-baseline
  • align-top
  • align-middle
  • align-bottom
  • align-text-top
  • align-text-bottom

• Ejemplo:

  <span class="align-middle">Texto alineado verticalmente al medio</span>
  

• Equivalente CSS:

  .align-middle {
    vertical-align: middle;
  }
  

Visibilidad

• Clases:

  • visible
  • invisible

• Ejemplo:

  <div class="invisible">Este elemento no es visible pero ocupa espacio</div>
  

• Equivalente CSS:

  .invisible {
    visibility: hidden;
  }
  

Conclusión

Recuerda que Tailwind CSS es altamente configurable y permite extender y personalizar las clases según las necesidades de tu proyecto. Para una referencia completa, visita la documentación oficial de Tailwind CSS.

Recursos Adicionales

• Configuración Personalizada: Aprende a personalizar Tailwind CSS mediante el archivo tailwind.config.js o utilizando la configuración en línea con el CDN.
• Plugins Oficiales: Explora plugins como @tailwindcss/forms y @tailwindcss/typography para ampliar las capacidades de Tailwind CSS.
• Componentes Preconstruidos: Utiliza recursos como Tailwind UI o Flowbite para acceder a componentes preconstruidos y acelerar tu flujo de trabajo (OJO: no usaremos esto en clase).